<template>
    <div class="syslogin">
        <h3>系 统 登 录</h3>
        <el-form :rules="rules" :model="loginData" ref="loginForm">
            <el-form-item prop="username">
                <el-input v-model="loginData.username" prefix-icon="el-icon-user" size="small" placeholder="请填写用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginData.password" prefix-icon="el-icon-lock" size="small" type="password" placeholder="请填写用户密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="rememberMe"> 记住密码</el-checkbox>
            </el-form-item>
            <el-button @click="submitLogin('loginForm')" class="submitBtn" type="primary" size="small">登 录</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                rememberMe : true,
                loginData:{ // 登录表单数据
                    username : 'root',
                    password : '1234'
                },
                rules : { // 登录表单的规则
                    username : [
                        {required : true,message : '请输入用户名',trigger : 'blur'}
                    ],
                    password : [
                        {required : true,message : '请输入用户密码',trigger : 'blur'}
                    ],
                }
            }
        },
        methods :{
            submitLogin(name){ // 提交登录
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$postKeyValueRequest('/doLogin',this.loginData).then(resp => {
                            if(resp){
                                window.sessionStorage.setItem('loginer',JSON.stringify(resp.data));
                                this.$router.replace('/Home');
                            }
                        })
                    } else {
                        this.$message.warning('请正确填写信息');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .syslogin{
        width: 380px;
        margin: 230px auto;
    }
    .syslogin h3{
        text-align: center;
        color: #fff;
    }
    .submitBtn{
        width: 100%;
    }
</style>